<%
    def columns = tableDefine.columns
    def varDomainName = tableNameUtil.lowerCaseFirst(tableDefine.id)
    def urlPrefix = PubUtils.addStrBeforeSeparator(PubUtils.packageToPath(config.category), ".") + varDomainName
%>
<template>
    <div>
        <elx-search-card searchTargetRef="table"
                         :searchItem="[
                         {
                         <%
                             println "'${columns[1].dataName}':'${columns[1].cnname}',";
                             println "'${columns[2].dataName}':'${columns[2].cnname}'";
                         %>
                         }]"
        ></elx-search-card>
        <el-card class="box-card" shadow="never">
            <el-row type="flex" class="row-bg" justify="start" style="margin:0 0 10px 0">
                <%
                    println'<el-button v-if="$route.meta.btns.addBtn" size="mini" type="success" icon="el-icon-circle-plus"\n' +
                            '                           @click="addItem">新增\n' +
                            '                </el-button>';
                    println'<el-button v-if="$route.meta.btns.deleteBtn" size="mini" type="danger" icon="el-icon-delete"\n' +
                            '                           @click="deleteItem">删除\n' +
                            '                </el-button>';
                    println'<el-button v-if="$route.meta.btns.updateBtn" size="mini" type="warning" icon="el-icon-edit"\n' +
                            '                           @click="updateItem">修改\n' +
                            '                </el-button>';
                    println'<el-button v-if="$route.meta.btns.viewBtn" size="mini" type="primary" icon="el-icon-view"\n' +
                            '                           @click="viewItem">查看\n' +
                            '                </el-button>';
                %>
            </el-row>
            <elx-table ref="table"
                       :url="url"
                       :columns="columns"
                       :initParams="initParams"
                       :searchParams="searchParams"
            >
            </elx-table>
            <el-dialog
                    title="新增"
                    :visible.sync="addVisible"
                    v-if="addVisible"
                    width="70%"
                    :close-on-click-modal="false"
                    v-drag>
                <%
                    println """		<${PubUtils.toLowerTbNamesCase(tableDefine.dbTableName)}-add ref="${PubUtils.toLowerTbNamesCase(tableDefine.dbTableName)}AddForm" @refreshTable="searchItem"
                                   @add${PubUtils.toUpperTbNamesCase(tableDefine.dbTableName)}Dialog="closeDialog"></${PubUtils.toLowerTbNamesCase(tableDefine.dbTableName)}-add>""";
                %>
                <div slot="footer" class="dialog-footer" style="text-align:center;">
                    <el-button type="primary" @click="submitForm('${PubUtils.toLowerTbNamesCase(tableDefine.dbTableName)}AddForm')">确 定</el-button>
                    <el-button type="danger" @click="addVisible = false">取 消</el-button>
                </div>
            </el-dialog>
            <el-dialog
                    :title="dialogTitle"
                    :visible.sync="updateVisible"
                    v-if="updateVisible"
                    width="70%">
                <%
                    println """		<${PubUtils.toLowerTbNamesCase(tableDefine.dbTableName)}-update ref="${PubUtils.toLowerTbNamesCase(tableDefine.dbTableName)}UpdateForm" @refreshTable="refresh"
                                      @update${PubUtils.toUpperTbNamesCase(tableDefine.dbTableName)}Dialog="closeDialog"
                                      :row="row" :operate="operate"></${PubUtils.toLowerTbNamesCase(tableDefine.dbTableName)}-update>""";
                %>
                <div v-if='this.operate === "update"' slot="footer" class="dialog-footer" style="text-align:center;">
                    <el-button type="primary" @click="submitForm('${PubUtils.toLowerTbNamesCase(tableDefine.dbTableName)}UpdateForm')">确 定</el-button>
                    <el-button type="danger" @click="updateVisible = false">取 消</el-button>
                </div>
                <div v-else slot="footer" class="dialog-footer" style="text-align:center;">
                    <el-button type="primary" @click="updateVisible = false">返 回</el-button>
                </div>
            </el-dialog>
        </el-card>
    </div>
</template>
<script>
    import ${PubUtils.toLowerTbNamesCase(tableDefine.dbTableName)}Add from './${PubUtils.toLowerTbNamesCase(tableDefine.dbTableName)}Add';
    import ${PubUtils.toLowerTbNamesCase(tableDefine.dbTableName)}Update from './${PubUtils.toLowerTbNamesCase(tableDefine.dbTableName)}Update';
    export default {
        name: "${PubUtils.toLowerTbNamesCase(tableDefine.dbTableName)}List",
        components: {
            "${PubUtils.toLowerTbNamesCase(tableDefine.dbTableName)}-add": ${PubUtils.toLowerTbNamesCase(tableDefine.dbTableName)}Add,
            "${PubUtils.toLowerTbNamesCase(tableDefine.dbTableName)}-update": ${PubUtils.toLowerTbNamesCase(tableDefine.dbTableName)}Update,
        },
        data() {
            return {
                url: "/loan/${PubUtils.toLowerTbNamesCase(tableDefine.dbTableName)}Action.do?_md=select${PubUtils.toUpperTbNamesCase(tableDefine.dbTableName)}ListBySelective",
                row: {},
                operate: "",
                dialogTitle: "",
                addVisible: false,
                updateVisible: false,
                viewVisible: false,
                columns: [
                    <%
                        def columnNames=[];
                        def dataNames=[];
                        cnt=1;
                        columns.each{
                            if(cnt==columns.size()){
                                println """ { prop: "${it.dataName}",
                                              label: "${it.cnname}" }""";

                                dataNames.add(it.dataName);
                                columnNames.add(it.columnName);
                            }else{
                                println """ { prop: "${it.dataName}",
                                              label: "${it.cnname}" },""";
                                dataNames.add(it.dataName);
                                columnNames.add(it.columnName);
                            }
                            cnt++;
                        }%>
                ],
                searchParams: {
                    curVers:"18"
                },
                initParams: {
                    curVers:"18"
                },
            };
        },
        mounted: function () {

        },
        methods: {
            addItem: function () {
                this.addVisible = true
            },
            deleteItem: function () {
                <%
                    print 'let rows = this.$refs.table.getSelectedRows();';
                %>
                const _this = this;
                if (rows.length === 1) {
                <%
                    print 'this.$confirm("是否删除此条数据？", "温馨提示", {\n' +
                            '                        confirmButtonText: "确认",\n' +
                            '                        cancelButtonText: "取消",\n' +
                            '                        type: "warning"\n' +
                            '                    }).then(() => {\n' +
                            '                        _this.$http.post(';
                %>
                    "/loan/${PubUtils.toLowerTbNamesCase(tableDefine.dbTableName)}Action.do?_md=delete${PubUtils.toUpperTbNamesCase(tableDefine.dbTableName)}ByPrimaryKey", {id: rows[0].id})
                            .then(function (response) {
                                if (response.success) {
                                    _this.refresh();
                                    <%
                                        print '_this.$success("删除成功！");';
                                    %>
                                } else {
                                    <%
                                        print '_this.$error(response.msg)';
                                    %>

                                }
                            })
                            .catch(function (error) {
                                <%
                                    print '_this.$error(error.message);';
                                %>
                            });

                    }).catch(() => {
                        return;
                    })
                } else {
                    <%
                        print 'this.$warning("请选择一行！");';
                    %>
                }
            },
            updateItem: function () {
                <%
                    print 'let rows = this.$refs.table.getSelectedRows();';
                %>
                if (rows.length !== 1) {
                    <%
                        print'this.$warning("请选择一行！")';
                    %>
                } else {
                    this.row = {...rows[0]};
                    this.operate = "update";
                    this.dialogTitle = "修 改";
                    this.updateVisible = true;
                }
            },
            searchItem: function () {
                <%
                    print 'this.$refs.table.search();';
                %>

            },
            viewItem: function () {
                <%
                    print 'let rows = this.$refs.table.getSelectedRows();';
                %>
                if (rows.length !== 1) {
                    <%
                        print 'this.$warning("请选择一行！")';
                    %>
                } else {
                    this.row = {...rows[0]};
                    this.operate = "view";
                    this.dialogTitle = "查 看";
                    this.updateVisible = true;
                }
            },
            refresh: function () {
                <%
                    print 'this.$refs.table.refresh();';
                %>
            },
            submitForm(formName) {
                <%
                    print 'this.$refs[formName].submitForm(formName);';
                %>
            },
            resetForm(formName) {
                <%
                    print 'this.$refs[formName].resetFields();';
                %>
            },
            closeDialog: function () {
                this.addVisible = false;
                this.updateVisible = false;
            }
        }
    };
</script>
